<template>
  <div>
<!--    <MdPreview :id="id" style="height: 100vh" :modelValue="content" />-->

    <div class="ed-md" >

      <MdPreview :id="id" style="height: 100vh" :modelValue="content" />

      <el-drawer
          v-model="isShow"
          :with-header="false"
      >
        <MdCatalog :editorId="id" :scrollElement="scrollElement" />
      </el-drawer>
    </div>

    <!--目录-->
    <div class="my_affix" style="position: absolute; top: 110px; right: 8%;">
      <el-affix class="ed-but" >
        <el-button @click="edBut"  size="small" circle >
          <el-icon :size="40">
            <ChatDotRound />
          </el-icon>
        </el-button>
      </el-affix>
    </div>

    <!--点击评论弹框-->
    <div class="my_affix" style="position: absolute; top: 180px; right: 8%;">
      <el-affix >
        <el-button size="small" circle @click="showDrawer">
          <el-icon :size="40">
            <ChatDotRound />
          </el-icon>
        </el-button>
      </el-affix>
    </div>
    <!--点击收藏-->
    <div class="my_affix"   style="position: absolute; top: 250px; right: 8%;">
      <el-affix >
        <el-button v-if="isChange" class="custom-button" size="small" circle @click="isCollect('true')">
          <el-avatar style="background-color:#fff;" :size="40" src="/文章收藏.png" />
        </el-button>

        <el-button v-else class="custom-button" size="small" circle @click="isCollect('false')">
          <el-avatar style="background-color:#fff;" :size="40" src="/取消收藏.png" />
        </el-button>
      </el-affix>
    </div>
    <!--点击点赞-->
    <div class="my_affix"  style="position: absolute; top: 320px; right: 8%;">
      <el-affix>
        <el-button v-if="isLike"  @click="addLike('true')" circle size="small" style="border: none;">
          <el-avatar style="background-color:#fff;" :size="40" src="/文章点赞.png" />
        </el-button>

        <el-button  v-else @click="addLike('false')" circle size="small" style="border: none;">
          <el-avatar style="background-color:#fff;" :size="40" src="/取消点赞.png" />
        </el-button>

      </el-affix>
    </div>
    <!--评论对话框-->
    <el-drawer v-model="drawer" :with-header="false" title="留言框" size="40%">
      <MyComment  :momentId="getMedicineId"/>
    </el-drawer>


  </div>
</template>
<script setup>
import {addArticleLike, addCollectAndLike, getArticleById, getIsCollect, getIsLoveStar} from "@/api/article.js"
import {onMounted, ref} from "vue";
import { MdEditor,MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import 'md-editor-v3/lib/preview.css';
import {ChatDotRound} from "@element-plus/icons-vue";
import useUserStore from "@/stores/user.js";
const userStore = useUserStore()
import MyComment from "@/components/articleExample/MyComment.vue";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
const props = defineProps(['articleId']);
const drawer = ref(false)
const isChange = ref(true)
const isLike = ref(true)
const content = ref("");
const id = 'preview-only';
const getMedicineId = Number(props.articleId);
const scrollElement = document.documentElement;
const isShow = ref(false)
function edBut(){
  isShow.value = true
}


async function isCollect(falg){
  if (await checkLogin()){
    const data ={
      articleId:props.articleId,
      //收藏
      status:falg
    }

    await addCollectAndLike(data)
    isChange.value = 'true' !== falg;
    if (isChange.value){
      ElMessage.success("取消成功")
    }else {
      ElMessage.success("收藏成功")
    }
  }

}
//校验登录
async function checkLogin(){
  if (userStore.token === undefined || userStore.token === '' || userStore.token === null){
    ElMessage.success("请先登录")
    await router.push("/login")
    return false
  }
  return true
}
//文章点赞
async function addLike(flag){
  if (await checkLogin()){
    const da ={
      articleId:props.articleId,
      //点赞
      status:flag
    }
    await addArticleLike(da)

    isLike.value = 'true' !== flag;
    if (isLike.value){
      ElMessage.success("取消成功")
    }else {
      ElMessage.success("点赞成功")
    }
  }
}

function showDrawer(){
  if (checkLogin()){
    drawer.value=true
  }

}
async function getArticle(){
  const {data:{data}} = await getArticleById(props.articleId)
  content.value = data.content
  console.log("content.value",content.value)
}
//查询当前文章是否被收藏
async function collect(){
  const {data:{data}} = await getIsCollect(props.articleId)
  isChange.value = !data
}
//查询当前文章是否被当前用户点赞
async function loveStar() {
  const {data:{data}} = await getIsLoveStar(props.articleId)
  isLike.value = !data
}
onMounted(() => {
  getArticle()
  collect()
  loveStar()
});

</script>

<style scoped>


/*.my_quill {
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  padding-bottom: 36px;
}*/
/*.my_affix {
  order: -1; !* 设置为负数，使其在同层级的flex子元素中优先显示 *!
  display: flex;
}*/

</style>